<template>
  <div class="controls">
    <div class="filters">
      <span style="font-size: 14px; color: #6b7280; margin-right: 8px;">筛选:</span>
      <button v-for="filter in filters" :key="filter.value" class="filter-btn"
        :class="{ active: activeFilter === filter.value }" @click="$emit('filter-change', filter.value)">
        {{ filter.label }}
      </button>
    </div>
    <div class="search-box">
      <input type="text" class="search-input" placeholder="搜索客户名" v-model="localSearchQuery"
        @keyup.enter="handleSearch">
      <button class="search-btn" @click="handleSearch">搜索</button>
      <button class="create-btn" @click="$emit('create-project')">手动创建项目</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { ProjectStatus } from '../types'

const props = defineProps<{
  activeFilter: ProjectStatus | 'all' | 'overdue'
  searchQuery: string
}>()

const emit = defineEmits<{
  'filter-change': [filter: ProjectStatus | 'all' | 'overdue']
  'search-change': [query: string]
  'create-project': []
}>()

const filters = [
  { value: 'all' as const, label: '全部项目' },
  { value: '未开始' as const, label: '未开始' },
  { value: '未达标' as const, label: '未达标' },
  { value: '已达标' as const, label: '已达标' },
  { value: 'overdue' as const, label: '逾期项目' }
]

// 本地搜索输入框的值
const localSearchQuery = ref(props.searchQuery)

// 监听外部传入的 searchQuery 变化，同步到本地状态
watch(() => props.searchQuery, (newValue) => {
  localSearchQuery.value = newValue
})

// 处理搜索按钮点击或回车键
const handleSearch = () => {
  emit('search-change', localSearchQuery.value)
}
</script>

<style scoped>
.controls {
  background: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
}

.filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.filter-btn:hover {
  background: #f9fafb;
}

.filter-btn.active {
  background: #6366f1;
  color: white;
  border-color: #6366f1;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  width: 250px;
}

.search-btn {
  padding: 8px 16px;
  background: #6366f1;
  color: white;
  border: 1px solid #6366f1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.search-btn:hover {
  background: #5b5cf6;
  border-color: #5b5cf6;
}

.create-btn {
  padding: 8px 16px;
  background: #10b981;
  color: white;
  border: 1px solid #10b981;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.create-btn:hover {
  background: #059669;
  border-color: #059669;
}
</style>